<template>
	<div>
		<el-dialog title="图片裁切" draggable center v-model="state.isShowDialog" width="980px" append-to-body destroy-on-close
			@close="resetComponent()">
			<div class="cropper-warp" v-if="state.cropperTask && state.cropperTask.length > 0">
				<div class="cropper-warp-left">
					<template v-for="(media, mediaIndex) in state.cropperTask" :key="mediaIndex">
						<section style="width: 100%; height: 100%" v-if="state.cropperIndex === mediaIndex">
							<img :src="media.path" :class="`cropper-warp-left-img cropper-warp-left-img${mediaIndex}`" />
						</section>
					</template>
				</div>
				<!-- <div class="cropper-warp-right">
					<section class="cropper-right-wrap">
						<div class="cropper-warp-right-title">预览</div>
						<div class="cropper-warp-right-item">
							<div class="cropper-warp-right-value">
								<img :src="state.cropperImgBase64" class="cropper-warp-right-value-img" />
							</div>
							<div class="cropper-warp-right-label">100 x 100</div>
						</div>
						<div class="cropper-warp-right-item">
							<div class="cropper-warp-right-value">
								<img :src="state.cropperImgBase64" class="cropper-warp-right-value-img cropper-size" />
							</div>
							<div class="cropper-warp-right-label">50 x 50</div>
						</div>
					</section>
					<section class="cropper-right-wrap" v-if="!confirmText">
						<div class="cropper-warp-right-title">下一个图像</div>
						<div class="cropper-warp-right-item">
							<div class="cropper-warp-right-value">
								<img :src="state.cropperTask[state.cropperIndex + 1].path"
									class="cropper-warp-right-value-img" />
							</div>
							<div class="cropper-warp-right-label">100 x 100</div>
						</div>
					</section>
				</div> -->
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="resetComponent()" size="default">取 消</el-button>
					<el-popconfirm width="220" confirm-button-text="确定" cancel-button-text="我再想想" icon="InfoFilled"
						icon-color="#626AEF" title="当前图像已经处理完毕吗?" @confirm="confirmCropper()">
						<template #reference>
							<el-button type="primary">{{ confirmText ? '确定' : '下一个' }}</el-button>
						</template>
					</el-popconfirm>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="cropper">
import { reactive, nextTick, computed } from 'vue';
import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css';
import { ElLoading } from 'element-plus';
const emits = defineEmits(['confirm', 'cancel']);
// 定义变量内容
const state = reactive<any>({
	isShowDialog: false,
	cropper: '' as RefType,
	cropperImgBase64: '', //预览的图像base64
	cropperTask: [], //需要裁切的图像任务
	cropperIndex: 0, //当前处理的任务索引
	cropperOptions: null, //裁切的配置项
	cropperResult: [], //裁切返回的结果集
});

const confirmText = computed(() => {
	return state.cropperTask.length > 1 && state.cropperIndex !== state.cropperTask.length - 1 ? false : true;
});
function confirmCropper() {
	console.log(state.cropperTask, state.cropperIndex);

	state.cropperTask[state.cropperIndex].cropper = state.cropperImgBase64;
	if (confirmText.value) {
		//裁切完毕
		console.log();
		const cropperIng = ElLoading.service({
			text: '图像正在处理中',
		});
		nextTick(() => {
			Promise.all(
				state.cropperTask.map((base: any) => {
					return base.cropper;
				})
			)
				.then((base64Result: any) => {
					let taskResult = state.cropperTask.map((item: any, index: number) => {
						item.cropper = base64Result[index];
						return item;
					});

					nextTick(() => {
						// Loading should be closed asynchronously
						setTimeout(() => {
							cropperIng.close();
							emits('confirm', taskResult);
							resetComponent();
						}, 1e3);
					});
				})
				.catch(() => {
					nextTick(() => {
						cropperIng.close();
					});
				});
		});
	} else {
		//切换下一个视图
		nextTick(() => {
			state.cropperIndex += 1;
			state.cropperImgBase64 = '';
			state.cropper.reset();
			state.cropper.clear();
			state.cropper.destroy();
			nextTick(() => {
				initCropper();
			});
		});
	}
}

function resetComponent() {
	state.isShowDialog = false;
	state.cropperOptions = null;
	state.cropperTask = [];
	state.cropperIndex = 0;
	state.cropperImgBase64 = '';
	state.cropper.reset();
	state.cropper.clear();
	state.cropper.destroy();
	emits('cancel')
}
function initComponent(row: any) {
	state.isShowDialog = true;
	state.cropperIndex = 0; //初始化任务索引
	state.cropperOptions = row.cropper;
	state.cropperTask = row.fileList;
	console.log(row, '初始化裁切参数');
	nextTick(() => {
		initCropper();
	});
}
// 初始化cropperjs图片裁剪
const initCropper = () => {
	const letImg = <HTMLImageElement>document.querySelector(`.cropper-warp-left-img${state.cropperIndex}`);
	console.log(state.cropperOptions, '裁切配置项');
	state.cropper = new Cropper(letImg, {
		viewMode: 1,
		dragMode: 'none',
		initialAspectRatio: 1,
		aspectRatio: 1,
		preview: '.before',
		autoCropArea: 0.6,
		movable: false,
		cropBoxResizable: false,
		zoomOnWheel: true,
		ready: () => {
			console.log(state.cropper.getData());
			setTimeout(() => {
				state.cropper.setCropBoxData({
					width: state.cropperOptions.width / 2,
					height: state.cropperOptions.height / 2,
				});

			}, 550);
		},
		crop: () => {
			state.cropperImgBase64 = state.cropper.getCroppedCanvas().toDataURL('image/jpeg');
		},
	});
};

// 暴露变量
defineExpose({
	initComponent,
});
</script>

<style scoped lang="scss" >
::v-deep .el-dialog__body {
	// height: 980px !important;
}

.cropper-warp {
	width: 750px;
	height: 750px;
	display: flex;


	.cropper-warp-left {
		position: relative;
		display: inline-block;
		height: 100%;

		// height: 350px;
		flex: 1;
		border: 1px solid var(--el-border-color);
		background: var(--el-color-white);
		overflow: hidden;
		background-repeat: no-repeat;
		cursor: move;
		border-radius: var(--el-border-radius-base);

		.cropper-warp-left-img {
			width: 100%;
			height: 100%;
		}
	}

	.cropper-warp-right {
		// width: 150px;
		// height: 350px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.cropper-warp-right-title {
			text-align: center;
			height: 20px;
			line-height: 20px;
		}

		.cropper-warp-right-item {
			margin: 15px 20px;

			.cropper-warp-right-value {
				display: flex;

				.cropper-warp-right-value-img {
					width: 100px;
					height: 100px;
					margin: auto;
				}

				.cropper-size {
					width: 50px;
					height: 50px;
				}
			}

			.cropper-warp-right-label {
				text-align: center;
				font-size: 12px;
				color: var(--el-text-color-primary);
				height: 30px;
				line-height: 30px;
			}
		}
	}
}
</style>
